<template>
  <form class="form-inline" @submit.prevent="onFormSubmit">
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">任务</div>
      </div>
      <input
        type="text"
        class="form-control"
        placeholder="请输入任务..."
        style="width: 320px"
        v-model.trim="taskName"
      />
    </div>
    <button type="submit" class="btn btn-primary">添加</button>
  </form>
</template>

<script>
export default {
  name: 'TodoInput',
  // 声明自定义事件
  // emits: ['add'],//3
  data() {
    return {
      // 新任务名称
      taskName: '',
    };
  },
  methods: {
    // 表单提交处理函数
    onFormSubmit() {
      // 1.判断任务名称是否为空
      if (!this.taskName) return alert('待办事项不能为空！');
      // 2.触发自定义的add事件
      this.$emit('add', this.taskName);
      // 3.清空文本框
      this.taskName = '';
    },
  },
};
</script>

<style lang="scss" scoped>
form {
  margin: 20px auto 0;
  width: 550px;
  display: flex;
  justify-content: center;
}
input {
  height: 40px;
}
button {
  height: 40px;
  width: 100px;
}
</style>
